<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Multi-directional document test</title>

	<script type="text/javascript" src="boilerplate.js" data-dojo-config="extraLocale: ['en','ar','he'], isDebug: true"></script>

	<script type="text/javascript">
		require([
			"doh/runner",

			"dojo/_base/array",
			"dojo/dom",
			"dojo/dom-geometry",
			"dojo/json",
			"dojo/on",
			"dojo/parser",
			"dojo/query",
			"dojo/data/ItemFileReadStore",

			"dijit/registry",

			"dijit/Tree",
			"dijit/tree/ForestStoreModel",

			"dijit/Menu",
			"dijit/MenuItem",
			"dijit/PopupMenuItem",

			"dijit/form/Button",
			"dijit/form/DropDownButton",
			"dijit/form/ComboButton",
			"dijit/form/ToggleButton",
	
			"dijit/ColorPalette",
			"dijit/Toolbar",
			"dijit/TooltipDialog",
	
			"dijit/form/TextBox",
			"dijit/form/DateTextBox",
			"dijit/form/NumberSpinner",
			"dijit/form/ComboBox",
	
			"dijit/layout/TabContainer",
			"dijit/layout/ContentPane",
				
			"dojo/domReady!"
		], function(doh, array, dom, domGeom, json, on, parser, query, ItemFileReadStore, registry){
		

			function checkLeft(/*Widget*/ left, /*Widget*/ right){
				if(left.domNode) left = left.domNode;
				if(right.domNode) right = right.domNode;
	
				var lp = domGeom.position(left, true),
					rp = domGeom.position(right, true);
	
				doh.t(lp.x+lp.w-0.1 <= rp.x,
					left.id + " to left of " + right.id + json.stringify(lp) + json.stringify(rp)
				);
			}

			doh.register("setup", [
				function parse(){
					parser.parse();
				},
				{
					name: "wait for tab container load",
					timeout: 5000,
					runTest: function(){
						return registry.byId("ltr_tc_cp").onLoadDeferred;
					}
				},
				{
					name: "wait for tree load",
					timeout: 5000,
					runTest: function(){
						return registry.byId("ltr_tc_tree").onLoadDeferred;
					}
				}
			]);

			doh.register("Test bidi toolbar", [
				{
					name: "toolbar checkLeft",
					runTest: function(){
						//Check that the order of the menu buttons is correct
						checkLeft(registry.byId("ltr_ToolbarCutButton"), registry.byId("ltr_ToolbarDropDown"));
						checkLeft(registry.byId("ltr_ToolbarDropDown"), registry.byId("ltr_ToolbarColorDropDown"));
						checkLeft(registry.byId("ltr_ToolbarColorDropDown"), registry.byId("ltr_ToolbarComboButton"));
						checkLeft(registry.byId("rtl_ToolbarComboButton"), registry.byId("rtl_ToolbarColorDropDown"));
						checkLeft(registry.byId("rtl_ToolbarColorDropDown"), registry.byId("rtl_ToolbarDropDown"));
						checkLeft(registry.byId("rtl_ToolbarDropDown"), registry.byId("rtl_ToolbarCutButton"));
					}
				},
				{
					name: "ltr_ToolbarDropDown",
					runTest: function(){
						registry.byId("ltr_ToolbarDropDown").openDropDown();

						checkLeft(dom.byId("ltr_l1"), registry.byId("ltr_i1"));
						checkLeft(dom.byId("ltr_l2"), registry.byId("ltr_i2"));
						checkLeft(dom.byId("ltr_l3"), registry.byId("ltr_i3"));

						doh.is("ltr", dom.byId("widget_ltr_i1").dir);
						doh.is("ltr", dom.byId("widget_ltr_i2").dir);
						doh.is("ltr", dom.byId("widget_ltr_i3").dir);
						doh.is("ltr", registry.byId("ltr_button").dir);
					}
				},
				{
					name: "rtl_ToolbarDropDown",
					runTest: function(){
						registry.byId("rtl_ToolbarDropDown").openDropDown();

						checkLeft(registry.byId("rtl_i1"), dom.byId("rtl_l1"));
						checkLeft(registry.byId("rtl_i2"), dom.byId("rtl_l2"));
						checkLeft(registry.byId("rtl_i3"), dom.byId("rtl_l3"));

						doh.is("rtl", dom.byId("widget_rtl_i1").dir);
						doh.is("rtl", dom.byId("widget_rtl_i2").dir);
						doh.is("rtl", dom.byId("widget_rtl_i3").dir);
						doh.is("rtl", registry.byId("rtl_button").dir);
					}
				},
				{
					name: "ltr_ToolbarMenuDropDown",
					runTest: function(){
						registry.byId("ltr_ToolbarComboButton").openDropDown();

						var icon = registry.byId("ltr_mi1").iconNode;
						var label = registry.byId("ltr_mi1").containerNode;
						checkLeft(icon, label);
					}
				},
				{
					name: "ltr_Toolbar_nested_menu",
					runTest: function(){
						on.emit(registry.byId("ltr_popup_mi1").domNode, "click",  {
							bubbles: true,
							cancelable: true,
							which: 1
						});
						var icon = registry.byId("ltr_popup_mi1").iconNode;
						var label = registry.byId("ltr_popup_mi1").containerNode;
						checkLeft(icon, label);
					}
				},
				{
					name: "rtl_ToolbarMenuDropDown",
					runTest: function(){
						registry.byId("rtl_ToolbarComboButton").openDropDown();

						var icon = registry.byId("rtl_mi1").iconNode;
						var label = registry.byId("rtl_mi1").containerNode;
						checkLeft(label, icon);
					}
				},
				{
					name: "rtl_Toolbar_nested_menu",
					runTest: function(){
						on.emit(registry.byId("rtl_popup_mi1").domNode, "click",  {
							bubbles: true,
							cancelable: true,
							which: 1
						});

						var icon = registry.byId("rtl_popup_mi1").iconNode;
						var label = registry.byId("rtl_popup_mi1").containerNode;
						checkLeft(label, icon);
					}
				}
			]);

			doh.register("Test bidi tab container", [
				{
					name: "ltr TabContainer",
					runTest: function(){
						// Check that the order of the tabs is correct
						checkLeft(registry.byId("ltr_tc_tablist_ltr_tc_cp"), registry.byId("ltr_tc_tablist_ltr_tc_tree"));

						// Check the fields on each of the first tabs
						doh.is("ltr", registry.byId("ltr_tc_cp").dir);

						var combo = query("input[value='dijit']", dom.byId("ltr_tc_cp"))[0];
						var arrow = query(".dijitButtonNode", dom.byId("ltr_tc_cp"))[0];
						checkLeft(combo, arrow);
					}
				},
				{
					name: "rtl TabContainer",
					runTest: function(){
						// Check that the order of the tabs is correct
						checkLeft(registry.byId("rtl_tc_tablist_rtl_tc_tree"), registry.byId("rtl_tc_tablist_rtl_tc_cp"));

						// Check the fields on each of the first tabs
						doh.is("rtl", registry.byId("rtl_tc_cp").dir);

						combo = query("input[value='dijit']", dom.byId("rtl_tc_cp"))[0];
						arrow = query(".dijitButtonNode", dom.byId("rtl_tc_cp"))[0];
						checkLeft(arrow, combo);
					}
				}
			]);

			doh.register("Tree", [
				{
					name: "ltr_tree",
					runTest: function(){
						registry.byId("ltr_tc").selectChild("ltr_tc_tree");

						var rowNodes = query(".dijitTreeRow", dom.byId("ltr_tc_tree"));

						array.forEach(rowNodes, function(rowNode){
							var expando = query(".dijitTreeExpando", rowNode)[0];
							var label = query(".dijitTreeContent", rowNode)[0];
							checkLeft(expando, label);
						});
					}
				},
				{
					name: "rtl_tree",
					runTest: function(){
						registry.byId("rtl_tc").selectChild("rtl_tc_tree");

						var rowNodes = query(".dijitTreeRow", dom.byId("rtl_tc_tree"));

						array.forEach(rowNodes, function(rowNode){
							var expando = query(".dijitTreeExpando", rowNode)[0];
							var label = query(".dijitTreeContent", rowNode)[0];
							checkLeft(label, expando);
						});
					}
				}
			]);

			doh.run();
		});
	</script>
</head>
<body class="claro">

	<h1 class="testTitle">Multi-directional document test</h1>

	<div data-dojo-id="continentStore" data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-props='url:"_data/countries.json"'></div>
	<div data-dojo-id="continentModel" data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-props='store:continentStore, query:{type:"continent"},
		rootId:"continentRoot", rootLabel:"Continents", childrenAttrs:["children"]'></div>

	<div id="right" dir="rtl" lang="ar-eg" style="float: right; width: 500px;">
		<h2>RTL</h2>

		<div data-dojo-type="dijit/Toolbar"
				><div id="rtl_ToolbarCutButton" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
				><div id="rtl_ToolbarDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
					<span>שיח</span>
					<div data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information"'>
						<table>
							<tr>
								<td><label id="rtl_l1">שם:</label></td>
								<td><input id="rtl_i1" data-dojo-type="dijit/form/TextBox"/></td>
							</tr>
							<tr>
								<td><label id="rtl_l2">תאריך:</label></td>
								<td><input id="rtl_i2" data-dojo-type="dijit/form/DateTextBox"/></td>
							</tr>
							<tr>
								<td><label id="rtl_l3">גיל:</label></td>
								<td><input id="rtl_i3" data-dojo-type="dijit/form/NumberSpinner"/></td>
							</tr>
							<tr>
								<td colspan="2" style="text-align:center;">
									<button id="rtl_button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit", name:"submit"'>כניסה</button>
								</td>
							</tr>
						</table>
					</div
				></div
				><div id="rtl_ToolbarColorDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
					<span>لوحة الألوان</span>
					<div id="rtl_colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
				</div
				><div id="rtl_ToolbarComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
					<span>القائمة</span>
					<div data-dojo-type="dijit/Menu" data-dojo-props='style:"display:none;"'>
						<div id="rtl_mi1" data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>حفظ</div>
						<div data-dojo-type="dijit/MenuItem">حفظ ك</div>
						<div id="rtl_popup_mi1" data-dojo-type="dijit/PopupMenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconForeColor"'>
							<span>فرعية</span>
							<div data-dojo-type="dijit/Menu">
								<div data-dojo-type="dijit/MenuItem">Submenu Item One</div>
								<div data-dojo-type="dijit/MenuItem">Submenu Item Two</div>
								<div data-dojo-type="dijit/PopupMenuItem">
									<span>Deeper Submenu</span>
									<div data-dojo-type="dijit/Menu">
										<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item One</div>
										<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item Two</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div
		></div>
		<div id="rtl_tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
			<div id="rtl_tc_cp" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"رابط", closable:true, href:"layout/doc0.html"'></div>
			<div id="rtl_tc_tree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"עץ", closable:true'></div>
		</div>
	</div>

	<div id="left" dir="ltr" lang="en-us" style="width: 500px; float: left;">
		<h2>LTR</h2>

		<div data-dojo-type="dijit/Toolbar"
				><div id="ltr_ToolbarCutButton" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconCut", showLabel:false'>Cut</div
				><div id="ltr_ToolbarDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"plusIcon", showLabel:true'>
					<span>TooltipDialog</span>
					<div data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information"'>
						<table>
							<tr>
								<td><label id="ltr_l1">Name:</label></td>
								<td><input id="ltr_i1" data-dojo-type="dijit/form/TextBox"/></td>
							</tr>
							<tr>
								<td><label id="ltr_l2">Date:</label></td>
								<td><input id="ltr_i2" data-dojo-type="dijit/form/DateTextBox"/></td>
							</tr>
							<tr>
								<td><label id="ltr_l3">Age:</label></td>
								<td><input id="ltr_i3" data-dojo-type="dijit/form/NumberSpinner"/></td>
							</tr>
							<tr>
								<td colspan="2" style="text-align:center;">
									<button id="ltr_button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit", name:"submit"'>Login</button></td>
							</tr>
						</table>
					</div
				></div
				><div id="ltr_ToolbarColorDropDown" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBackColor", showLabel:true'>
					<span>ColorPalette</span>
					<div id="ltr_colorPalette" data-dojo-type="dijit/ColorPalette" data-dojo-props='style:"display:none;", palette:"7x10", onChange:function(){ console.log(this.value); }'></div>
				</div
				><div id="ltr_ToolbarComboButton" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", iconClass:"plusIcon", showLabel:true'>
					<span>Menu</span>
					<div data-dojo-type="dijit/Menu" data-dojo-props='style:"display none;"'>
						<div id="ltr_mi1" data-dojo-type="dijit/MenuItem"  data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave"'>Save</div>
						<div data-dojo-type="dijit/MenuItem">Save As</div>
						<div id="ltr_popup_mi1" data-dojo-type="dijit/PopupMenuItem">
							<span>Enabled Submenu</span>
							<div data-dojo-type="dijit/Menu">
								<div data-dojo-type="dijit/MenuItem">Submenu Item One</div>
								<div data-dojo-type="dijit/MenuItem">Submenu Item Two</div>
								<div data-dojo-type="dijit/PopupMenuItem">
									<span>Deeper Submenu</span>
									<div data-dojo-type="dijit/Menu">
										<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item One</div>
										<div data-dojo-type="dijit/MenuItem">Sub-sub-menu Item Two</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div
		></div>

		<div id="ltr_tc" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width: 450px; height: 300px; margin-top: 1em;"'>
			<div id="ltr_tc_cp" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Href", closable:true, href:"layout/doc0.html"'></div>
			<div id="ltr_tc_tree" data-dojo-type="dijit/Tree" data-dojo-props='model:continentModel, openOnClick:true, title:"Tree", closable:true'></div>
		</div>

	</div>

</body>
</html>
